<template>
  <div class="kjk">
    <div class="user">
      <a-flex class="t">
        <!-- <img src="@/assets/40.png" class="img24" /> -->
        <span></span>
        <span @click="handleClick">设置</span>
      </a-flex>
      <a-flex>
        <van-image
          round
          class="img48"
          :src="userInfo?.memberPicture ? userInfo?.memberPicture : tx"
        />
        <a-flex class="pn">
          <div v-if="userInfo?.phonenumber != null">
            {{
              userInfo?.phonenumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
            }}
          </div>
          <div>{{ userInfo?.memberName }}</div>
        </a-flex>
      </a-flex>
    </div>
    <div class="content">
      <div class="grid">
        <div
          v-for="(item, index) in kasd"
          :key="index"
          class="grid-rows-4"
          @click="hksdf(item)"
        >
          <img :src="item.url" class="img5058" />
          <a-typography-text class="bl"> {{ item.name }} </a-typography-text>
        </div>
      </div>
    </div>
  </div>
  <Menu />
  <div class="popup" v-show="show">
    <div class="img">
      <div class="wz">
        <div class="hi">Hi 亲爱的用户</div>
        <div class="wxh">
          我是客服小桐，也是养生顾问有问题尽管咨哦! 微信号：
          <span class="text_6">{{ configValue }}</span>
        </div>
      </div>
      <van-button
        type="primary"
        class="copy-button"
        size="small"
        @click="handleOk"
      >
        复制微信号</van-button
      >
      <img src="@/assets/37.png" class="img24 assets37" @click="show = false" />
    </div>
  </div>
</template>

<script setup>
import Menu from '@/components/menus/index.vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import { getSystemMemberInfo, putSystemMember, systemConfig } from '@/api/api'
import { copyToClipboard } from '@/utils/util'
import myNeeds from '@/assets/112.png'
import InviteFriends from '@/assets/113.png'
import Contact from '@/assets/114.png'
import ReceiAddress from '@/assets/115.png'
import tx from '@/assets/129.png'
const router = useRouter()
const configValue = ref('')
const show = ref(false)

const kasd = [
  {
    id: 1,
    name: '我的需求',
    url: myNeeds,
  },
  {
    id: 2,
    name: '邀请好友',
    url: InviteFriends,
  },
  {
    id: 3,
    name: '联系客服',
    url: Contact,
  },
  {
    id: 4,
    name: '收货地址',
    url: ReceiAddress,
  },
]
const userInfo = ref({})
onBeforeMount(async () => {
  userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
  getWX()
})
const getWX = async () => {
  const res = await systemConfig()
  configValue.value = res.data.configValue
}

const handleClick = async () => {
  router.push({ path: '/userCenter' })
}
const hksdf = (item) => {
  switch (item.id) {
    case 1:
      router.push({ path: '/needs' })
      break
    case 2:
      router.push({ path: '/friends' })
      break
    case 3:
      show.value = true
      break
    case 4:
      router.push({ path: '/address' })
      break
  }
}

const handleOk = () => {
  copyToClipboard(configValue.value, true)
  show.value = false
}
const handleCancel = () => {
  show.value = false
}
</script>

<style scoped lang='less'>
.kjk {
  height: calc(100% - 60px);
  position: relative;
  background: #fcfaf4;

  .content {
    height: calc(100% - 50px);
    overflow-y: auto;
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
    padding: 1%;

    .grid-rows-4 {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 15px;
      padding: 1%;

      .fx {
        width: 80%;
        height: 80%;
        margin-bottom: 5px;
      }
    }
  }
}

.user {
  width: 100%;
  height: 145px;
  background: url('@/assets/8.png') no-repeat;
  background-size: cover;
  padding: 14px 16px;
  .t {
    justify-content: space-between;
    color: #fff;
    height: 44px;
  }
  .pn {
    flex-direction: column;
    margin-left: 12px;
    color: #fff;
    font-size: 16px;
  }
}
.popup {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 999;
  .img {
    width: 326px;
    height: 344px;
    background: url('@/assets/7.png') no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .wz {
      position: absolute;
      top: 183px;
      left: 50%;
      transform: translate(-50%, -50%);
      .hi {
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
        line-height: 20px;
        margin-right: 148px;
      }

      .wxh {
        width: 238px;
        height: 56px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 14px;
        font-weight: normal;
        text-align: left;
        line-height: 28px;
        margin-top: 6px;
        white-space: normal; /* 允许换行 */
        word-break: break-all; /* 允许在任意字符间断行 */

        .text_6 {
          color: rgba(0, 0, 0, 0.85);
          font-size: 18px;
          font-family: Roboto-Medium;
          font-weight: 500;
          display: inline; /* 保持内联 */
          vertical-align: baseline; /* 对齐基线 */
        }
      }
    }
    .copy-button {
      background-color: rgba(60, 112, 88, 1);
      border-radius: 8px;
      height: 48px;
      width: 270px;
      position: absolute;
      left: 28px;
      bottom: 21px;
      padding: 13px 95px 13px 95px;
    }
    .assets37 {
      position: absolute;
      bottom: -44px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>